﻿@{
    Layout = null;
    ExChange.Model.Ware ware = (ExChange.Model.Ware)ViewBag.Wear;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>@ViewBag.Title</title>
    <script src="~/Content/js/jquery-3.1.1.min.js"></script>
    <script src="~/Layer/layer.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background-color: #e2edf3;
        }

        .ware-content {
            height: auto;
            text-align: center;
            width: 100%;
            overflow: auto;
            padding: 10px 0 0 0;
            font-size: 14px;
            background-color: #acd0e3;
            border-radius: 0 0 20px 20px;
            border-bottom: 5px #f8e191 solid;
            box-shadow: 0 0 10px #000;
            padding-bottom: 15px;
            padding-top: 25px;
        }

            .ware-content .content-img {
                width: 40%;
                margin: auto;
                box-shadow: 0 0 8px #000;
            }

                .ware-content .content-img img {
                    width: 100%;
                }

            .ware-content .content-title {
                font-size: 16px;
                color: #555;
                margin-top: 15px;
            }

            .ware-content .content-des {
                font-size: 12px;
                margin-top: 15px;
                color: #888;
                padding: 0 40px;
            }

        .order-form {
            line-height: 60px;
            padding-top: 20px;
            width: 80%;
            margin: auto;
        }

        input {
            border: 3px solid #fdb54a;
            box-shadow: 0px 0px 40px #58aedb inset;
            background-color: #acd0e3;
            border-radius: 23px;
            width: calc(100% - 26px);
            padding-left: 20px;
            outline: none;
            height: 30px;
            color: white;
            font-size: 14px;
        }

        .content-more {
            width: 60%;
            margin: auto;
            margin-top: 20px;
            padding-bottom: 40px;
        }

            .content-more .a {
                display: block;
                width: 100%;
                text-align: center;
                border: 1px #83cede solid;
                padding: 8px 0;
                font-size: 14px;
                border-radius: 9px;
                color: #83cede;
                background-color: #ebf6f8;
                text-decoration: none;
            }
    </style>
</head>
<body>
    <div class="ware-content">
        <div class="content-img">
            <img src="@ware.ImageUrl" />
        </div>
        <div class="content-title">
            @ware.Name
        </div>
        <div class="content-des">
            @ware.Remark
        </div>
    </div>
    <div class="order-form">
        <input type="text" id="username" value="输入姓名" onfocus="if (this.value == '输入姓名') this.value = ''" onblur="    if (this.value == '') this.value = '输入姓名'" />
        <input type="text" id="phone" value="输入手机号码" onfocus="if (this.value == '输入手机号码') this.value = ''" onblur="    if (this.value == '') this.value = '输入手机号码'" />
        <input type="text" id="address" value="输入收货地址" onfocus="if (this.value == '输入收货地址') this.value = ''" onblur="    if (this.value == '') this.value = '输入收货地址'" />
        <input type="text" id="zipcode" value="输入邮编" onfocus="if (this.value == '输入邮编') this.value = ''" onblur="    if (this.value == '') this.value = '输入邮编'" />
    </div>
    <div class="content-more">
        <a href="#" onclick="pushorder()" class="a" id="pagea">提交订单</a>
    </div>

    <script>
        function pushorder() {
            var username = $("#username").val();
            var phone = $("#phone").val();
            var address = $("#address").val();
            var zipcode = $("#zipcode").val();
            if (username != "" && username != "输入姓名" && phone != "" && phone != "输入手机号码" && address != "" && address != "输入收货地址" && zipcode != "" && zipcode != "输入邮编") {
                $.post("/WeChat/OrderAjax", { username: username, phone: phone, address: address, zipcode: zipcode,levels:@ViewBag.levels }, function (data) {
                    var json = eval(data);
                    if (json.status == 1) {
                        layer.msg('兑换成功，点击关闭！', {
                            time: 0,
                            btn: ['确定'],
                            yes: function (index) {
                                wx.closeWindow();
                                window.opener = null;
                                window.open('', '_self');
                                window.close();
                            }
                        });
                    } else {
                        layer.msg(json.message);
                    }
                });
            } else {
                layer.msg('请填写完整信息！');
            }
        };
    </script>
</body>
</html>
